<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-checkcard-group"
    >
      <div
        class="ant-pro-checkcard ant-pro-checkcard-checked ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card A
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              选项一
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-checkcard ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card B
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              选项二
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-checkcard ant-pro-checkcard-disabled ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card C
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              选项三，这是一个不可选项
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard.Group Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            onChange
          </strong>
          : 选中值改变时的回调函数，参数为选中的 value
        </li>
        <li>
          <strong>
            defaultValue
          </strong>
          : 默认选中的值
        </li>
        <li>
          <strong>
            value
          </strong>
          : 受控的选中值
        </li>
        <li>
          <strong>
            multiple
          </strong>
          : 是否支持多选，默认为 false（单选）
        </li>
        <li>
          <strong>
            children
          </strong>
          : CheckCard 子组件
        </li>
      </ul>
      <h4>
        CheckCard 在 Group 中的 Props：
      </h4>
      <ul>
        <li>
          <strong>
            value
          </strong>
          : 选项的值，用于标识该选项
        </li>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            description
          </strong>
          : 卡片描述
        </li>
        <li>
          <strong>
            disabled
          </strong>
          : 是否禁用该选项
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>